<template>
  <div class="ub ub-ver bg_f2">
    <div class="ub orderTips padding-css3 timeMs">
      <div class="ub ub-f1 f12 ">
        <p>温馨提示：请在
          <span class="countDown">{{payEndTime}}</span>前完成订单支付,如果超时未支付我们将不能保证订单的有效性</p>
      </div>
    </div>
    <div class="margin-t-css4 padding-css2 ub ub-ver bg-white f16">
      <div class="ub border-botttom padding-css6">
        <div class="ub">
          <span>订单号</span>
        </div>
        <div class="ub ub-f1 ub-pe">
          <span class="payNum">{{orderNo}}</span>
        </div>
      </div>
      <div class="ub padding-css6">
        <div class="ub">
          <span>支付金额</span>
        </div>
        <div class="ub ub-f1 ub-pe moneyColor fontWei">￥
          <span class="payMoney">{{payMoney}}</span>
        </div>
      </div>
    </div>
    <div class="margin-t-css4 padding-css2 ub ub-ver bg-white f16">
      <div class="ub border-botttom padding-css6 ub-ac">
        <div class="ub ub-f1 ub-ac"><img class="img1 ub ub-ac" src="./pay_alipay.png" />
          <span>支付宝</span>
        </div>
        <div class="ub ub-pe ub-ac"><img class="img2 ub ub-ac" src="./form_tick.png" /></div>
      </div>
    </div>
    <div class="margin-t-css3 ub padding-css2" @click="pay" id="payment">
      <div class="ub btn1 f18 border-radiuscss1 ub-ac ub-pc">
        <span>立刻支付</span>
      </div>
    </div>
    <form class="uhide payview" id="pay_form">
    </form>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import $ from '../../../static/dateScroll/jquery-1.9.1.js';
import _AP from '../../../static/pay/ap.js';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '订单支付',
      ifshow: true,
      leftAction: '/allOrders',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    console.log(this.orderPayment);
    if (this.orderPayment.details.resvCode) {
      this.systemTime = this.orderPayment.details.systemTime;
      this.orderNo = this.orderPayment.details.resvCode;
      this.payMoney = this.orderPayment.details.totalPrice;
      this.payEndTime = this.getTime(this.orderPayment.details.payEndTime);
    } else {
      this.payEndTime = this.getTime(this.orderPayment.details.payEndTime);
      this.systemTime = this.orderPayment.details.systemTime;
      this.orderNo = this.orderPayment.details.order.orderNo;
      this.payMoney = this.orderPayment.details.order.orderTotalSum + this.orderPayment.details.order.orderPayHandle;
    }
  },
  data: function () {
    return {
      min: 0,
      sec: 0,
      payEndTime: 0,
      systemTime: 0,
      orderNo: '',
      payMoney: 0
    }
  },
  components: {
  },
  computed: mapState(['loginData', 'confirmOrder', 'airTicketOrder', 'flights', 'orderPayment']),
  methods: {
    pay: function () {
      // userInfo登陆后的数据
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId;
      let loginToken = userInfo.token.loginToken;
      let content = {
        'orderNo': this.orderNo
      }
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      this.$store.commit('showLoading');
      this.$http.post(this.$RS.pay, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body
          console.log(res)
          if (res.code === 1000) {
            let data = JSON.parse(res.content.sign);
            console.log(1);
            $('.payview').attr('action', data.action);
            $('.payview').attr('method', data.method);
            for (let key in data) {
              if (key !== 'action' && key !== 'method') {
                console.log(key + ' : ' + data[key])
                let html = '<input type="hidden" name="' + key + '" value="' + data[key] + '"/>';
                $('.payview').append(html);
              }
            }
            let ua = navigator.userAgent.toLowerCase() || '';
            console.log('ua is ' + ua)
            if (ua.indexOf('micromessenger') !== -1) { // 在微信浏览器里时
              try {
                var queryParam = '';
                Array.prototype.slice.call(document.querySelectorAll('input[type=hidden]')).forEach(function (ele) {
                  queryParam += ele.name + '=' + encodeURIComponent(ele.value) + '&';
                });
                var gotoUrl = document.querySelector('#pay_form').getAttribute('action') + '?' + queryParam;
                _AP.pay(gotoUrl);
              } catch (e) {
                alert(JSON.stringify(e));
              }
            } else {
              $('.payview').submit();
            }
          } else {
            this.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
          }
        },
        function (err) {
          this.$store.commit('closePop');
          // 响应错误回调
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    getTime: function (time) {
      let a = new Date(time);
      let str = (a.getHours() < 10 ? '0' + a.getHours() : a.getHours()) + ':' + (a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes())
      return str;
    }
  }
}
</script>

<style lang="stylus" scoped >
@import '../../stylus/base.styl';
.orderTips
  background-color: #EEDAF5;
  color: #854A95;
  line-height: f_times(1.2);
.countDown
  color: #5A8D63;
.padding-css3
  padding: f_times(0.8) f_times(0.8);
.padding-css2
  padding: 0 f_times(0.8);
.margin-t-css4
  margin-top: f_times(0.4);
.bg-white
  background-color: white;
.border-botttom
  border-bottom: 1px solid #EEE;
.padding-css6
  padding: f_times(0.8) 0;
.f16
  font-size: f_times(1.2);
.moneyColor
  color: #FF9D01;
.fontWei
  font-weight: 600;
.img1
  width: f_times(1.2);
.img2
  width: f_times(1.2);
.padding-css2
  padding: 0 f_times(0.8);
.margin-t-css3
  margin-top: f_times(0.9);
.btn1
  color: white;
  background-color: #843D99;
  height: f_times(3);
  width: 100%;
.border-radiuscss1
  border-radius: f_times(0.8);
</style>